<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem to="/user/setting?type=setting">{{$t('user.accountSetting')}}</BreadcrumbItem>
      <BreadcrumbItem>{{$t('user.changeEmail')}}</BreadcrumbItem>
    </Breadcrumb>
    <div class="title">{{$t('user.changeEmail')}}</div>
    <Row>
      <Col span="8">
        <Form ref="formValidate" label-position="top" :model="form" :rules="ruleValidate">
          <FormItem :label="$t('user.verificationEmail')" prop="oldVCode">
            <Input v-model="form.oldVCode" :placeholder="$t('user.emailVerificationCode')">
              <t-send-code type="5" :email="userInfo.email" slot="append"></t-send-code>
            </Input>
          </FormItem>
          <FormItem :label="$t('user.newEmail')" prop="newEmail">
            <Input v-model="form.newEmail" :placeholder="$t('user.enterNewEmail')"></Input>
          </FormItem>
          <FormItem :label="$t('user.verificationNewEmail')" prop="newVCode">
            <Input :placeholder="$t('user.enterEmailVerificationCode')" v-model="form.newVCode">
              <t-send-code type="5" :email="form.newEmail" slot="append"></t-send-code>
            </Input>
          </FormItem>
          <Button class="btn" :loading="loading" @click="onChangeEmail" type="primary" size="large" long>
            {{$t('user.change')}}
          </Button>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>

import TSendCode from "@/components/t-send-code";
import {mapState} from "vuex";
import {changeEmail, logout} from "@/api/user";
export default {
  name: "index",
  components: {TSendCode},
  data() {
    return {
      loading: false,
      form: {
        newEmail: '', //新邮箱
        newVCode: '', //新邮箱验证码
        oldEmail: '', // 旧邮箱
        oldVCode: '' // 旧设备验证码(邮箱或手机)
      },
      ruleValidate: {
        oldVCode: [
          {required: true, message: this.$t('user.enterEmailVerificationCode'), trigger: 'blur'}
        ],
        newEmail: [
          {required: true, message: this.$t('user.enterNewEmail'), trigger: 'blur'}
        ],
        newVCode: [
          {required: true, message: this.$t('user.enterNewEmailVerificationCode'), trigger: 'blur'}
        ],
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    onChangeEmail() {
      this.loading = true;
      this.form.oldEmail = this.userInfo.email;
      changeEmail(this.form).then((res)=>{
        this.$Message.success(this.$t('user.changeEmailSuccess'));
        this.loading = false;
        this.onLogout();
      }).catch(()=>{
        this.loading = false;
      })
    },
    onLogout() {
      // 退出登录
      logout().then(()=>{
        this.$store.commit('resetUserInfo');
        this.$router.push('/');
      })
    },
  }
}
</script>

<style scoped lang="less">
.container {
  .title {
    margin-top: 24px;
    margin-bottom: 24px;
    color: @t-title-color;
    font-weight: 600;
    font-size: 26px;
  }
  .btn-code {
    font-size: 14px;
  }

}
</style>